import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { visualizer } from 'rollup-plugin-visualizer'
import path from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		vue(),
		//打包分析文件大小功能
		visualizer({
			open: false, // 注意这里设置为true, 否则无效
			gzipSize: false,
			brotliSize: false
		}),
		AutoImport({
		    resolvers: [ElementPlusResolver()],
		}),
		Components({
			resolvers: [ElementPlusResolver()],
		}),
	],
	server: {
		open: true, // 自动打开
		port: 1212, // 端口
		hmr: true // 开启热加载
	},
	resolve: {
	  // 设置别名
	  alias: {
		  '@': path.resolve(__dirname, 'src'),
		  'comps': path.resolve(__dirname, 'src/components')
	  }
	},
	build: {
		target: 'modules', // 设置最终构建的浏览器兼容目标
		outDir: 'dist', // 构建包名
		assetsDir: 'assets', // 静态资源存放路径
		sourcemap: false, // 构建后是否生成map 文件
		minify: 'esbuild', // 项目压缩
		chunkSizeWarningLimit: 1000, // chunk 大小警告限制（以kb）
		cssTarget: "chrome61", //防止 vite 将 rgba() 颜色转化为 #RGBA 十六进制符号的形式  (要兼容的场景是安卓微信中的 webview 时,它不支持 CSS 中的 #RGBA 十六进制颜色符号)
	},
  // 样式全局配置
	css: {
	  // 全局变量+全局引入less+配置主题色
	  preprocessorOptions: {
		less: {
		  javascriptEnabled: true,
		  // 全局变量使用：@primary-color
		  modifyVars: {
			"primary-color": "#1890ff", // 全局主色
			"link-color": " #1890ff", // 链接色
			"success-color": " #52c41a", // 成功色
			"warning-color": " #faad14", // 警告色
			"error-color": " #ff4d4f", // 错误色
			"font-size-base": " 14px", // 主字号
			/*light浅色背景下*/
			"light-headline": "#262626", // 标题色
			"light-text": "#595959", // 主要文字
			"light-text-secondary": "#8c8c8c", // 次要文字
			"light-disabled": "#bfbfbf", // 禁用
			"light-border": " #d9d9d9", // 边框色
			"light-cut-off-rule": " #f0f0f0", // 分割线
			"light-bg": " #f5f5f5", // 背景
			"light-table-headline": " #fafafa", // 表格标题
			/*dark深色背景下*/
			"dark-headline": "#262626", // 标题色
			"dark-text": "#595959", // 主要文字
			"dark-text-secondary": "#8c8c8c", // 次要文字
			"dark-disabled": "#bfbfbf", // 禁用
			"dark-border": " #d9d9d9", // 边框色
			"dark-cut-off-rule": " #f0f0f0", // 分割线
			"dark-bg": " #f5f5f5", // 背景
			"dark-table-headline": " #fafafa", // 表格标题
			/*边框配置*/
			"border-radius-base": " 2px", // 组件/浮层圆角
			"box-shadow-base": " 0 2px 8px rgba(0, 0, 0, 0.15)", // 浮层阴影
		  }
		}
	  }
	}

})
